<template>
	<div class="container" style="display: inline;margin-right: 10px;">
		<el-tag
			v-for="(tag, index) in dynamicTags"
			:key="index"
			:closable="!disabled"
			:disabled="disabled"
			:disable-transitions="false"
			class="el-tag-margin"
			@close="handleClose(tag)"
		>
			{{ tag }}
		</el-tag>

		<el-input
			v-if="inputVisible"
			ref="saveTagInput"
			v-model="inputValue"
			class="input-new-tag"
			size="small"
			:disabled="disabled"
			@keyup.enter.native="handleInputConfirm"
			@blur="handleInputConfirm"
			v-input="inputLimit"
		></el-input>
		<el-button
			v-if="!inputVisible && !disabled"
			class="button-new-tag"
			:disabled="disabled"
			size="small"
			type="primary"
			@click="showInput"
		>
			{{ $t('dxn.game_rule.add') }}
		</el-button>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { Decimal } from 'decimal.js'
export default {
	mixins: [list],
	props: {
		value: {
			type: [String, Number],
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
		min: {
			type: Number,
			default: 1
		},
		max: {
			type: Number,
			default: 100000000
		},
		step: {
			type: Number,
			default: 1
		},
		precision: {
			type: Number,
			default: 0
		},
		tagsName: {
			type: String,
			default: ''
		},
		switchVal: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			checklist: [],
			dynamicTags: [],
			inputVisible: false,
			inputValue: ''
		}
	},
	computed: {
		newPrecision() {
			if (this.tagsName === 'insuranceTurn') {
				return undefined
			} else {
				return this.precision
			}
		},
		inputLimit() {
			if (this.precision === 0) {
				return { name: 'int' }
			} else if (this.precision === 1) {
				return { name: 'float', num: '1' }
			} else {
				return { name: 'float', num: '2' }
			}
		}
	},
	watch: {
		value: {
			handler(val) {
				if (Array.isArray(val)) {
					this.dynamicTags = val
				} else {
					if (val || Number(val) === 0) {
						this.dynamicTags = String(val)
							.split(',')
							.filter((item) => item !== '')
					} else {
						val = ''
					}
				}
			},
			immediate: true
		},
		dynamicTags(val) {
			if (Array.isArray(val)) {
				this.$emit('input', val.join(','))
			} else {
				this.$emit('input', val)
			}
		}
	},
	methods: {
		handleClose(tag) {
			if (this.disabled) return
			if (this.tagsName === 'anteLimits') {
				// 前注功能开启时,前注 (倍BB)至少要保留一项值
				if (this.switchVal === 1 && this.dynamicTags.length <= 1) {
					this.$message.closeAll()
					this.$message.warning(
						this.$t('dxn.game_rule.ante_switch_tips')
					)
					return
				}
			}
			this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
		},

		showInput() {
			this.inputVisible = true
			this.$nextTick((_) => {
				this.$refs.saveTagInput.$refs.input.focus()
			})
		},

		handleInputConfirm() {
			this.$message.closeAll()
			let inputValue = this.inputValue
			if (inputValue === '') {
				this.inputVisible = false
				this.inputValue = ''
				return
			}
			if (inputValue || Number(inputValue) === 0) {
				inputValue = Number(
					new Decimal(inputValue).toFixed(2, Decimal.ROUND_DOWN)
				)
				let arr = []
				if (Array.isArray(this.dynamicTags)) {
					arr = [...this.dynamicTags]
				} else {
					if (this.dynamicTags) {
						arr = String(this.dynamicTags)
							.split(',')
							.filter((item) => item !== '')
					} else {
						arr = []
					}
				}
				// 重复值校验
				if (arr.find((item) => Number(item) === Number(inputValue))) {
					this.$message.error(this.$t('dxn.game_rule.already_exists'))
					this.inputVisible = false
					this.inputValue = ''
					return
				}
				// 只大于0的选项
				const onlyMaxZeroTagArr = [
					{ tag: 'bbDefaultCarry', tips: '有效值为>0的整数' },
					{ tag: 'feeCap', tips: '每手收费上限必须大于0' },
					{
						tag: 'anteLimits',
						tips: '有效值为>0的整数或小数(取至小数点后一位)'
					}
				]
				const maxZeroTag = onlyMaxZeroTagArr.find(
					(item) => item.tag === this.tagsName
				)
				// 输入值大小校验
				if (maxZeroTag && Number(inputValue) <= Number(this.min)) {
					this.$message.error(maxZeroTag.tips)
					this.inputVisible = false
					this.inputValue = ''
					return
				} else if (
					Number(inputValue) > Number(this.max) ||
					Number(inputValue) <= Number(this.min)
				) {
					this.$message.error(
						this.$t('dxn.game_rule.range_of_input_values', {
							min: this.min,
							max: this.max
						})
					)
					this.inputVisible = false
					this.inputValue = ''
					return
				}
				arr.push(inputValue)
				// 除了noLimitTagsArr里的标签无限制，其它最多30项
				const noLimitTagsArr = ['bbSetting']
				// 以下tag最多输入20项
				const twentyTagsArr = [
					'rewardValue',
					'maximumRound',
					'squidUpperLimit',
					'capotSquidNumberLowerLimit',
					'insuranceLowerMulti',
					'evExtractionLowerLimitMulti'
				]
				if (twentyTagsArr.includes(this.tagsName) && arr.length > 20) {
					this.$message.error('最多20项，请删除后再新增')
					this.inputVisible = false
					this.inputValue = ''
					return
				} else if (
					noLimitTagsArr.indexOf(this.tagsName) === -1 &&
					arr.length > 30
				) {
					this.$message.error('最多30项，请删除后再新增')
					this.inputVisible = false
					this.inputValue = ''
					return
				}
				arr.sort((a, b) => a - b)
				this.dynamicTags = arr.join(',')
			}
			this.inputVisible = false
			this.inputValue = ''
		}
	}
}
</script>

<style lang="scss" scoped>
.el-tag-margin {
	margin-right: 10px;
}
.el-tag-margin:last-of-type {
	margin-right: 15px;
}
.button-new-tag {
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.input-new-tag {
	width: 90px;
}
.item {
	margin-right: 20px;
	&:last-child {
		margin-right: 0;
	}
}
::v-deep .el-tag .el-icon-close {
	top: -16px;
	right: -18px;
	border: 1px solid #409eff;
}
</style>
